<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}">
</head>
<body>
<div class="ok-body" id="app" v-cloak>
    <div id="treePanel" style="overflow: auto;">
        <ul id="orgTree" class="ztree"></ul>
    </div>
</div>
<div th:replace="common/foot :: foot(jquery、tree)"></div>
<script th:inline="none">
    var setting = {
        data : {
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "parentId",
                rootPId : "0"
            },
            key : {
                url : "nourl"
            }
        },
        callback : {
            onClick : function(event, treeId, treeNode) {
                vm.id = treeNode.parkId;
                vm.name = treeNode.name;
            }
        }
    };
    var vm = new Vue({
        el: '#app',
        data:{
            okUtils:null,
            okLayer:null,
            id:null,
            name:null
        },
        methods: {
            tree : function() {
                vm.okUtils.ajaxCloud({
                    url:"/app/park/select",
                    // param : {parentId: vm.parentId},
                    close:false,
                    success : function(result) {
                        vm.entity = result.msg;
                        $.fn.zTree.init($("#orgTree"), setting, result.msg);
                    }
                });
            },
            acceptClick : function(dialog){
                dialog.entity.parkId = vm.id;
                dialog.entity.name = vm.name;
                vm.okUtils.dialogClose();
            }
        },
        created: function() {
            var that = this;
            layui.use(["okUtils", "okLayer"], function () {
                that.okUtils = layui.okUtils;
                that.okLayer = layui.okLayer;
                that.tree();
            });
        }
    });
</script>
</body>
</html>